<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>try calendar</title>
		<meta charset="utf-8" />
		<!--让IE开启它的兼容模式-->
		<meta http-equiv='X-UA-Compatible' content='IE-edge'>
		<!--让手机的屏幕端口正常显示-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">		
		<title>index page</title>
		<!-- Bootstrap -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="./js/jquery-1.10.2.min.js"></script>
	</head>
	
	<body>
		<div id='app'>
			<button @click=getMonthDays(2020,1)>get monthdays </button>
			<div>there are  {{ days }} days  this month</div>
			<hr />
			<button @click=getWeek(2020,1,9)>get week </button>
			<div>  week {{ week }}</div>
			<hr />
			<button @click=getweeksInMonth(2020,1)>getweeksInMonth </button>
			<div>  total {{ weeks }} weeks this month</div>
			<div>  this is daysList {{ daysList }}</div>
			<div>  this is groupeddaysList {{ groupeddaysList[0] }}</div>
			<div>{{ year }}年{{ month }}月{{ day }}日</div>
			<div>{{ hour }}:{{ minute }}:{{ seconds }}</div>
			<div>{{ week_which }}</div>
			<div >
				
					<!-- {{ one }}&nbsp;&nbsp;&nbsp;&nbsp; -->
					<table>
						<th v-for="item in calendar_head">
							{{ item }} &nbsp;&nbsp;
						</th>
						<tr v-for="Array1 in groupeddaysList">
							<td v-for="one in Array1">{{ one }}</td>
						</tr>
						
					</table>
				
				
			</div>
			<div id="">

			</div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					days:'30',
					week:'11',
					weeks:'4',
					calendar_head:[
						'一','二','三','四','五','六','日'
					],
					daysList:[],
					groupeddaysList:[],
					Array1:[],
					year:'',
					month:'',
					day:'',
					hour:'',
					minute:'',
					seconds:'',
					week_which:''
					
					
				},
				
				methods:{
					getMonthDays:function(year, month){
						var daysnum = new Date(year, month, 0).getDate();
						this.days=daysnum
						return daysnum
					},
					getWeek: function(year, month, day){
						var weeknum = new Date(year, month-1,day).getDay();
						this.week = weeknum
						return weeknum
					},
					//getMonthDays: daysnum是一个月有多少天
					//getweeksInMonth: weeksnum是一个月有几个星期
					//getWeek: weeknum是一个月一号是在星期几
					
					subArray:function(array, subGroupLength) {
						let index = 0;
						let newArray = [];
						while(index < array.length) {
							  newArray.push(array.slice(index, index += subGroupLength));
						}
						return newArray;
					  },
					
					getweeksInMonth: function(year, month){
						var daysnum = this.$options.methods.getMonthDays.bind(this)(2020, 1)
						var FirstDayWeekday = this.$options.methods.getWeek.bind(this)(year, month,1)
						weeksnum = Math.ceil((daysnum+FirstDayWeekday)/7)
						this.weeks = weeksnum
						
						
						alert(FirstDayWeekday)
						// alert('FirstDayWeekday:',FirstDayWeekday)
						// alert('weeksnum:',weeksnum)
						for(i=1; i <daysnum+1; i++){
							// console.log(i,typeof(i))
							this.daysList.push(i)
							
	
						}
						for(j=0; j<FirstDayWeekday - 1; j++){
							var lastMonthdaysnum = this.$options.methods.getMonthDays.bind(this)(2019, 12)
							
							this.daysList.unshift(lastMonthdaysnum-j)
							// console.log(30-j)
						}
						// for(k=0; k<weeksnum*7 - daysnum - weeksnum; k++ ){
						// 	var nextMonthdaysnum = this.$options.methods.getMonthDays.bind(this)(2020, 2)
						// 	console.log('this is k')
						// }
						var k = weeksnum * 7
						var l = k -daysnum - FirstDayWeekday + 1
						console.log(k,l)
						for(m=1; m<l+1;m++){
							console.log(m)
							this.daysList.push(m)
						}
						
						var groupeddaysList = this.$options.methods.subArray.bind(this)(this.daysList, 7);
						this.groupeddaysList = groupeddaysList
						console.log(groupeddaysList)
						index=groupeddaysList.length -1
						firstArray = groupeddaysList[0]
						console.log(firstArray)
						
						//当前的年月日时分秒
						var todaydate= new Date()
						var year = todaydate.getFullYear()
						var month = todaydate.getMonth()+1
						var day = todaydate.getDate()
						var hour = todaydate.getHours()
						var minute = todaydate.getMinutes()
						var seconds = todaydate.getSeconds()
						var week_which = todaydate.getDay()
						
						if (week_which == 0) {  
						        week_which = "星期日";  
						} else if (week_which == 1) {  
						        week_which = "星期一";  
						} else if (week_which == 2) {  
						        week_which = "星期二";  
						} else if (week_which == 3) {  
						        week_which = "星期三";  
						} else if (week_which == 4) {  
						        week_which = "星期四";  
						} else if (week_which == 5) {  
						        week_which = "星期五";  
						} else if (week_which == 6) {  
						        week_which = "星期六";  
						}  
						
						this.year = year;
						this.month = month;
						this.day = day;
						this.hour = hour;
						this.minute = minute;
						this.seconds = seconds;
						this.week_which = week_which
						
						
					
					}
				}
				
			})
			
			
			
		</script>
	</body>
</html>

